<template>
    <!-- html -->
    <div class="Route">
        <div class="ziluyou">
            <h3>this is NavigationActrive.</h3>
            <ul>
                <li v-for="item in reactList" :key="item.id">
                    <!-- query传参 -->
                    <!-- 第一种写法 -->
                    <!-- <RouterLink :to="`/actrive/detail?id=${item.id}&name=${item.name}&age=${item.age}`">{{ item.name }}</RouterLink> -->
                    <!-- 第二种写法 -->
                    <!-- <RouterLink :to="{
                        // path: '/actrive/detail',
                        name: 'xiangqing',
                        query: {
                            id: item.id,
                            name: item.name,
                            age: item.age
                        }
                    }">
                        {{ item.name }}
                    </RouterLink> -->

                    <!-- params传参 -->
                    <!-- 第一种写法 -->
                    <!-- <RouterLink :to="`/actrive/detail/${item.id}/${item.name}/${item.age}`">
                        {{ item.name }}
                    </RouterLink> -->
                    <!-- 第二种写法 -->
                    <!-- <RouterLink :to="{
                        // path: '/actrive/detail',
                        name: 'xiangqing',
                        params: {
                            id: item.id,
                            name: item.name,
                            age: item.age
                        }
                    }">
                        {{ item.name }}
                    </RouterLink> -->

                    <!-- props -->
                    <button @click="click_rouer(item)">{{ item.name }}</button>
                    <RouterLink :to="{
                        // path: '/actrive/detail',
                        name: 'xiangqing',
                        query: {
                            id: item.id,
                            name: item.name,
                            age: item.age
                        }
                    }">
                        {{ item.name }}
                    </RouterLink>
                </li>
            </ul>
        </div>
        <div>
            <RouterView></RouterView>
        </div>
    </div>
</template>

<!-- 安装 vue 路由模块  npm install vue-router -->

<!-- npm i vite-plugin-vue-setup-extend -D -->
<script lang="ts" setup name='NavigationActrive'>
import { reactive } from 'vue';
import { RouterView, RouterLink, useRouter } from 'vue-router';
const reactList = reactive([
    { id: 1, name: "xxx", age: 12, },
    { id: 2, name: "www", age: 13, },
    { id: 3, name: "yyy", age: 14, }
])

//编程式导航
const router = useRouter()
//点击跳转
function click_rouer(item: any) {
    //编程式导航
    router.push({
        // path: '/actrive/detail',
        name: 'xiangqing',
        query: {
            id: item.id,
            name: item.name,
            age: item.age
        }
    })

    //无历史跳转 不能返回
    // router.replace({
    //     // path: '/actrive/detail',
    //     name: 'xiangqing',
    //     query: {
    //         id: item.id,
    //         name: item.name,
    //         age: item.age
    //     }
    // })
}

</script>
<style scoped>
/* 样式 */
.NavigationActrive {
    background-color: skyblue;
    border-radius: 10px;
    padding: 20px;
}

.ziluyou {
    background-color: skyblue;
    height: 300px;
    width: 200px;
}
</style>